import type {Theme} from '@/lib/registry/themes'
import {themes} from '@/lib/registry/themes'
import {defineStore} from 'pinia'
import {useColorMode, useStorage} from '@vueuse/core'

interface Config {
    theme?: Theme['name']
    radius: number
}

export const useCustomizeStore = defineStore('customize', {
    state: () => {
        const config = useStorage<Config>('customize-config', {
            default: () => ({
                theme: 'zinc',
                radius: 0.5,
            }),
        })

        const {value: color} = useColorMode()
        const isDark = color === 'dark'

        console.log('config', config.value)
        console.log('isDark', isDark)

        return {
            config,
            isDark,
        }
    },
    getters: {
        themeClass: (state) => `theme-${state.config.theme}`,
        theme: (state) => state.config.theme,
        radius: (state) => state.config.radius,
        themePrimary: (state) => {
            const t = themes.find((t) => t.name === state.config.theme)
            return t ? `hsl(${t.cssVars[state.isDark ? 'dark' : 'light'].primary})` : ''
        },
    },
    actions: {
        setTheme(themeName: Theme['name']) {
            this.config.theme = themeName
        },
        setRadius(newRadius: number) {
            this.config.radius = newRadius
        },
    },
}, {
    persist: true
})
